<template>
	<view class="card-content">
		<image class='img' :src="item.img"></image>
		<view class="right">
			<p><span>{{ item.name }}</span><span>￥{{ item.price }}</span></p>
			<p><span>七天无理由退换</span><span>×{{ item.buyNum }}</span></p>
			<p><span>总价￥{{ item.price * item.buyNum | totalPrice }}</span><span>实付款￥{{ item.price * item.buyNum | totalPrice }}</span></p>
		</view>
	</view>
</template>

<script>
	export default{
		props:['item'],
		filters:{
			 totalPrice(total){
				 return total.toFixed(2)
			 }
		}
	}
</script>

<style lang='scss'>
	.card-content{
		width: 100%;
		height: 230rpx;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid rgba(176,196,222,.1);
		.img{
			width: 180rpx;
			height: 180rpx;
			border-radius: 15rpx;
		}
		.right{
			width: calc(100% - 180rpx);
			height: 180rpx;
			box-sizing: border-box;
			padding-left: 15rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			p{
				width: 100%;
				height: 60rpx;
				display: flex;
			}
			p:first-child{
				span:first-child{
					width: 77%;
					height: 60rpx;
					color: #555555;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				span:last-child{
					width: 23%;
					height: 60rpx;
					font-size: 28rpx;
					color: #555555;
					text-align: right;
				}
			}
			p:nth-child(2){
				align-items: center;
				justify-content: space-between;
				span:first-child{
					padding: 5rpx 15rpx;
					font-size: 28rpx;
					border-radius: 10rpx;
					color: rgba(216,30,6,1);
					border: 1rpx solid rgba(216,30,6,.5);
					background-color: rgba(216,30,6,.02);
				}
				span:last-child{
					color: #999999;
				}
			}
			p:last-child{
				justify-content: space-between;
				align-items: flex-end;
				span:first-child{
					color: #999999;
					font-size: 30rpx;
				}
				span:last-child{
					font-size: 32rpx;
				}
			}
		}
	}
</style>
